<!--时间选择M-->

<template>
  <div class="w-h-full" :style="{
    textAlign: 'center',
    lineHeight: $parent.$parent.layoutItem.layoutItemConfigData.height - 2 + 'px'
  }">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <Input ref="Input" v-model="inputValue"
           :type="'text'"
           :size="component.compConfigData.inputConfig.size"
           :placeholder="component.compConfigData.inputConfig.placeholder"
           :clearable="component.compConfigData.inputConfig.clearable"
           :disabled="component.compConfigData.inputConfig.disabled"
           :readonly="component.compConfigData.inputConfig.readonly"
           :icon="'ios-time-outline'"
           :style="Object.assign({
            width: component.compConfigData.inputConfig.inputStyle.width,
            transform: 'scale('+component.compConfigData.inputConfig.inputStyle.scaleValue+')'
           }, inputStyleObject)"
           @on-focus="inputOnFocusHandler"
           @on-click="inputOnFocusHandler"
    />

    <van-popup v-model="visible"
               :position="component.compConfigData.position"
               :round="component.compConfigData.round"
               :closeOnClickOverlay="component.compConfigData.closeOnClickOverlay"
               :get-container="component.compConfigData.getContainer"
               :style="{ height: component.compConfigData.position == 'left' || component.compConfigData.position == 'right' ? '100%': '' }"

    >
      <van-datetime-picker
          :type="component.compConfigData.type"
          :title="component.compConfigData.title"
          :confirm-button-text="component.compConfigData.confirmButtonText"
          :cancel-button-text="component.compConfigData.cancelButtonText"
          :show-toolbar="component.compConfigData.showToolbar"
          @confirm="onConfirmHandler"
          @cancel="onCancelmHandler"
      />
    </van-popup>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import DatetimePicker from 'vant/lib/datetime-picker';
  import Popup from 'vant/lib/popup';
  import 'vant/lib/datetime-picker/style';
  import 'vant/lib/popup/style';

  const _this = {
    name: 'VanDatetimePickerComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    components: {
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup
    },
    attr: {
      version: '1.0',
      configDataTemp: Object.assign({

        inputConfig: {
          size: 'large',
          placeholder: '请选择',
          clearable: false,
          disabled: false,
          readonly: true,
          inputStyle: {
            scaleValue: 1,
            width: '150px',
            backgroundColor: '#263238',
            color: '#fff',
            borderColor: '#2196f3'
          }
        },

        type: 'date',
        title: '请选择',
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        showToolbar: true,

        position: 'bottom',
        round: true,
        closeOnClickOverlay: true,
        getContainer: '#app',

        onConfirmCode: ''

      }, PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemConfirm', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value','')
        ])
      ]))
    },
    data() {
      return {
        visible: false,
        inputValue: '',
        value: ''
      }
    },
    destroyed() {
      this.$EventBus.$off('pn_show_van_datetime_picker_m_'+this.component.id)
    },
    mounted() {
      this.init();

      if (!this.$store.state.release.pageMetadata) {
        this.$EventBus.$off('pn_show_van_datetime_picker_m_'+this.component.id)
        this.$EventBus.$on('pn_show_van_datetime_picker_m_'+this.component.id, () => {
          this.visible = !this.visible
        })
      }
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      },

      inputOnFocusHandler () {
        this.visible = true
      },

      onConfirmHandler (selectedData) {
        switch (this.component.compConfigData.type) {
          case 'date':
            this.inputValue = this.$PnUtil.dateFormatter(selectedData, 'yyyy-MM-dd')
            break
          case 'time':
            this.inputValue = selectedData
            break
          case 'year-month':
            this.inputValue = this.$PnUtil.dateFormatter(selectedData, 'yyyy-MM')
            break
          case 'month-day':
            this.inputValue = this.$PnUtil.dateFormatter(selectedData, 'MM-dd');
            break
          case 'datehour':
            this.inputValue = this.$PnUtil.dateFormatter(selectedData, 'yyyy-MM-dd hh')
            break
          default:

        }
        this.visible = false
      },

      onCancelmHandler () {
        this.visible = false
      }
    },
    computed: {
      inputStyleObject () {
        return {
          '--background-color': this.component.compConfigData.inputConfig.inputStyle.backgroundColor,
          '--color': this.component.compConfigData.inputConfig.inputStyle.color,
          '--border-color': this.component.compConfigData.inputConfig.inputStyle.borderColor,
        }
      }
    }
  };

  export default _this
</script>

<style scoped>
div {
  color: #323233 !important;
}

>>> .ivu-input {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--color);
}
>>> .ivu-input::-webkit-input-placeholder{
  color: var(--color);
}
>>> .ivu-input::-moz-placeholder{
  color: var(--color);
}
>>> .ivu-input-icon {
  color: var(--color);
  font-size: 18px !important;
}
</style>
